<template>
  <div class="app-container">
    <div v-if="visible" class="page-filter mb10 fl">
      <el-form ref="filter" :model="filter" label-width="0">
        <el-form-item class="mr10 mb5 fl">
          <el-date-picker
            v-model="filter.salary_date"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            size="small"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" style="width: 300px">
          <el-button class="fl" size="small" @click="app.reset('filter')">清 空</el-button>
          <el-button class="fl" type="primary" size="small" @click="querySalary">查 询</el-button>
          <el-button class="fl" type="primary" size="small" @click="handleDialog({dRef: 'upload', dTitle: '薪资导入', dType: 'add', dField: dField})">导 入</el-button>
          <a class="fl" href="javascript:void(0)" style="color: blue;margin-left: 10px;" @click="handleMudule">模板.xlsx</a>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-if="visible" v-loading="app.loading" class="search-table" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="序号" align="center" width="56px">
        <template slot-scope="{$index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="120px" prop="name" />
      <el-table-column label="员工手机" width="120px" prop="phone" />
      <el-table-column label="状态" align="center" width="120px" :formatter="formatterState" />
      <el-table-column label="实发工资金额" align="right" width="110px" prop="real" />
      <el-table-column label="基本工资" align="right" width="110px" prop="basic" />
      <el-table-column label="职务加给" align="right" width="110px" prop="job" />
      <el-table-column label="基本绩效" align="right" width="110px" prop="achievement" />
      <el-table-column label="住房补贴" align="right" width="110px" prop="housing" />
      <el-table-column label="交通补贴" align="right" width="110px" prop="traffic" />
      <el-table-column label="全勤奖" align="right" width="110px" prop="full" />
      <el-table-column label="小计" align="right" width="110px" prop="subtotal" />
      <el-table-column label="单位缴费（社保）" align="right" width="140px" prop="social" />
      <el-table-column label="单位缴费（公积金）" align="right" width="150px" prop="accumulation_fund" />
      <el-table-column label="加班补助" align="right" width="110px" prop="overtime" />
      <el-table-column label="饭贴" align="right" width="110px" prop="meal" />
      <el-table-column label="津贴" align="right" width="110px" prop="allowance" />
      <el-table-column label="高温补贴" align="right" width="110px" prop="high_temperature_subsidy" />
      <el-table-column label="总计" align="right" width="110px" prop="total" />
      <el-table-column label="请假天数" align="right" width="110px" prop="leave_days" />
      <el-table-column label="请假扣除" align="right" width="110px" prop="de_leave" />
      <el-table-column label="迟到/未打卡扣除" align="right" width="130px" prop="de_work" />
      <el-table-column label="全勤奖扣除" align="right" width="110px" prop="de_full" />
      <el-table-column label="宿舍房租" align="right" width="110px" prop="de_dorm" />
      <el-table-column label="绩效扣除" align="right" width="110px" prop="de_achievements" />
      <el-table-column label="代发工资" align="right" width="110px" prop="issue" />
      <el-table-column label="个税扣除" align="right" width="110px" prop="de_tax" />
      <el-table-column label="社保扣款" align="right" width="110px" prop="de_social" />
      <el-table-column label="公积金扣除" align="right" width="110px" prop="de_accumulation_fund" />
      <el-table-column label="操作" align="center" width="90px" fixed="right">
        <template slot-scope="{row}">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :disabled="row.state === 1"
                @click.native="handleDialog({...row, ...
                {dRef: 'dialog', dTitle: '薪资修改', dType: 'edit', dField: dFieldU}})"
              >
                编 辑
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="row.state === 1"
                @click.native="handleState({id: row.id, state: '1'})"
              >
                确 认
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="row.state === 0"
                @click.native="handleState({id: row.id, state: '0'})"
              >
                撤 回
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="row.state === 1"
                @click.native="handleDelete(row)"
              >
                删 除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="visible" v-show="filter.pageAll>0" :total="filter.pageAll" :page.sync="filter.pageCurrent" :limit.sync="filter.pageNumber" @pagination="getList" />
    <Upload ref="upload" :get-data="querySalary" :info="dialog" />
    <Dialog ref="dialog" :get-data="querySalary" :info="dialog" />
    <Password ref="password" :get-data="pageShow" :info="dialog" />
  </div>
</template>

<script>
import { querySalary, salaryInfos, updateState, delSalary } from '@/api/finance/salary'
import { module } from '@/api/file'
import page from '@/utils/page'
import Upload from './components/salary/upload-dialog'
import Dialog from './components/salary/salary-dialog'
import Password from './components/salary/password-dialog'

export default {
  name: '',
  components: { Upload, Dialog, Password },
  extends: page,
  props: {
    reqList: {
      default: salaryInfos,
      type: Function
    },
    reqDel: {
      default: delSalary,
      type: Function
    }
  },
  data() {
    return {
      dField: ['salary_date', 'title'],
      dFieldU: ['id', 'name', 'phone', 'real', 'basic', 'job', 'achievement', 'housing', 'traffic',
        'full', 'subtotal', 'social', 'accumulation_fund', 'overtime', 'meal', 'allowance', 'total', 'de_leave',
        'de_work', 'de_full', 'de_dorm', 'de_achievements', 'issue', 'de_tax', 'de_social', 'de_accumulation_fund', 'high_temperature_subsidy', 'leave_days']
    }
  },
  created() {
    // this.pageShow()
    this.$nextTick(() => {
      this.dialog.title = '登录确认'
      this.dialog.type = ''
      this.dialog.edit = { password: '' }
      this.$refs['password'].visible = true
    })
  },
  methods: {
    pageShow() {
      this.$set(this, 'visible', true)
      this.querySalary()
    },
    querySalary() {
      this.$set(this.filter, 'lss_id', '')
      // this.$set(this.filter, 'salary_date', '')
      querySalary(this.filter).then(response => {
        const info = response.info
        if (info.salary_date) {
          this.$set(this.filter, 'salary_date', info.salary_date)
          this.$set(this.filter, 'lss_id', info.id)
          this.getList()
        } else {
          this.$set(this.filter, 'salary_date', new Date())
        }
      }).catch(err => {
        this.$message.error(err.msg ? err.msg : '获取数据失败')
      })
    },
    handleMudule() {
      module({
        fileName: 'salary.xlsx'
      }).then(response => {
        this.out(response)
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleState(e) {
      this.$confirm('此操作将修改数据信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        updateState(e).then(response => {
          this.querySalary()
        }).catch(err => {
          this.$message.error(err.msg ? err.msg : '获取数据失败')
        })
      })
    },
    formatterState(e) {
      const o = e.state
      if (o === 0) {
        return '未确认'
      } else {
        return '已确认'
      }
    }
  }
}
</script>
